/** 
 *  歌曲封面组件
 * 
 */

import React, { memo } from 'react';

import { Tooltip } from 'antd';
import { SongsCoverWrapper } from "./style";

import { formatPlaycount, formatImageSize } from "@/utils/format-utils";

const SongsCover = memo((props) => {
  const { item, right } = props;

  return (
    <SongsCoverWrapper right={right}>
      <div className="cover-top">
                                      {/* 推荐或歌单 */}
        <img src={formatImageSize(item.picUrl || item.coverImgUrl, 140)} alt={item.name} />
        <div className="cover sprite_covor">
          <div className="info sprite_covor">
            <span>
              <i className="erji sprite_icon"></i>
              {formatPlaycount(item.playCount)}
            </span>
            <i className="play sprite_icon"></i>
          </div>
        </div>
      </div>

      <div className="cover-bottom text-nowrap">
        <Tooltip title={item.name} placement="bottom">
          <span>{item.name}</span>
        </Tooltip>
      </div>

      <div className="cover-source text-nowrap">
                    {/* 推荐或歌单 */}
        by {item.copywriter || item.description}
      </div>
    </SongsCoverWrapper>
  )
})

export default SongsCover